<template>
  <div class="home">
    <!-- 导航栏 -->
    <!-- <div class="nav">
      <ul class="nav_warp">
        <li>
          <img src="@/assets/Homepage_desktop/Logo.png" alt="" />
        </li>
        <li class="nav_list">
            <span>首页</span>
        </li>
        <li class="nav_list">
          <span>产品</span>
          <img src="@/assets/Homepage_desktop/arrow_dropdown.png" alt="" />
        </li>
        <li class="nav_list">
            <span>海外引流推广</span>
        </li>
        <li class="nav_list">
          <span>出海资讯</span>
          <img src="@/assets/Homepage_desktop/arrow_dropdown.png" alt="" />
        </li>
        <li class="nav_list">
            <span>联系我们</span>
        </li>
        <li class="nav_list">
            <span>全球社交流量导航</span>
        </li>
      </ul>
    </div> -->

    <!-- 底部 -->
    <div class="footer">
      <div class="footer_warp">
        <div class="footer_item">
          <div class="footer_item_i">
            <h4>产品</h4>
            <ul>
              <li>WhatsApp拓客</li>
              <li>Facebook拓客</li>
              <li>51客服系统</li>
              <li>海外引流推广</li>
            </ul>
          </div>
        </div>
        <div class="footer_item">
          <div class="footer_item_i">
            <h4>出海资讯</h4>
            <ul>
              <li>WhatsApp</li>
              <li>Facebook</li>
              <li>51客服系统</li>
            </ul>
          </div>
        </div>
        <div class="footer_item">
          <div class="footer_item_i">
            <h4>最新文章</h4>
            <ul>
              <li>如何正确使用翻...</li>
              <li>TikTok运营狂揽...</li>
              <li>WhatsApp账号</li>
              <li>WhatsApp筛选系...</li>
              <li>TikTok运营狂揽...</li>
            </ul>
          </div>
        </div>
        <div class="footer_item">
          <div class="footer_item_i">
            <h4>关于我们</h4>
            <ul>
              <li>联系我们</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer_middle">
        <div class="footer_item">
          <div class="footer_item_warp">
            <h4>联系我们</h4>
          </div>
        </div>
        <div class="footer_item">
          <div class="footer_item_warp">
            <p>公众号</p>
            <div class="footer_image">
              <img src="@/assets/wx_ewm.png" alt="" />
            </div>
          </div>
        </div>
        <div class="footer_item">
          <div class="footer_item_warp">
            <p>微信号</p>
            <div class="footer_image">
              <img src="@/assets/wx_ewm.png" alt="" />
            </div>
          </div>
        </div>
        <div class="footer_item">
          <div class="footer_item_warp">
            <div class="footer_top">
              <p>51出海</p>
              <p>飞机官方频道</p>
            </div>
            <div class="footer_image">
              <img
                src="@/assets/Homepage_desktop/contact_us_telegrame_icon.png"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
      <div class="footer_friendship">
        <p>友情链接：全球社交流量导航</p>
      </div>
      <div class="footer_statement">
        <p>
          &copy;2017-2021出海-海外引流增长与营销工具-声明：网站上的服务均为第三方提供，与51出海无关。请用户注意甄别服务质量，避免上当受骗
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {};
  },
};
</script>

<style scoped>
/* 导航栏 */
.nav_warp .nav_list{
    margin-left: 70px;
    color: #212c48;
}
.nav_warp>li{
    vertical-align: middle;
    margin-top: 20px;
}
.nav_warp {
  width: 1245px;
  outline: 1px solid;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-content: center;
  text-align: center;
}
.nav {
  height: 60px;
  background: green;
}

/* 底部 */
.footer_item_warp .footer_top {
  margin-bottom: 20px;
  width: 102px;
  text-align: center;
  color: #d1d4da;
  font-size: 14px;
}
.footer_statement > p {
  text-align: center;
  color: #d1d4da;
  font-size: 12px;
  padding-bottom: 20px;
}
.footer_friendship {
  padding: 30px 0 40px 355px;
}
.footer_image > img {
  width: 100%;
}
.footer_image {
  width: 102px;
}
.footer_item_warp {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}
.footer_item_warp > p {
  margin-bottom: 20px;
  width: 102px;
  text-align: center;
}

.footer_item_i > ul > li {
  margin-top: 25px;
}
.footer_item_i > ul,
.footer_item_warp > p,
.footer_friendship > p {
  color: #d1d4da;
  font-size: 14px;
}
.footer_item_i > h4,
.footer_item_warp > h4 {
  font-size: 18px;
  color: #fff;
}
.footer_item {
  width: 290px;
  height: 245px;
  padding-left: 100px;
}
.footer_warp,
.footer_middle,
.footer_friendship {
  width: 1160px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer {
  background: #1d2845;
  padding-top: 80px;
}

.home {
  /* height: 5000px; */
  /* width: 100%; */
  background: pink;
}
</style>>